<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>店铺管理系统</title>
    <link rel="stylesheet" href="bootstrap-4.5.0-dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="index.html">店铺管理系统</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
            aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">商品列表 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">订单列表</a>
                </li>
            </ul>
            <form class="form-inline mt-2 mt-md-0">
                <span class="mr-2 text-light">admin</span>
                <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">注销</button>
            </form>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <div class="accordion col-md-3 col-lg-2 d-md-block sidebar collapse pl-0 pr-0 bg-dark"
                id="accordionExample">
                <div class="card bg-dark">
                    <div class="card-header" id="headingOne">
                        <h2 class="mb-0">
                            <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse"
                                data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                <svg class="bi" fill="currentColor">
                                    <use xlink:href="bootstrap-icons.svg#house" />
                                </svg>
                                <a href="index.html">首页</a>
                            </button>
                        </h2>
                    </div>
                </div>
                <div class="card  bg-dark">
                    <div class="card-header" id="headingTwo">
                        <h2 class="mb-0">
                            <button class="btn btn-link btn-block text-left collapsed" type="button"
                                data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false"
                                aria-controls="collapseTwo">
                                <svg class="bi" fill="currentColor">
                                    <use xlink:href="bootstrap-icons.svg#bag" />
                                </svg>
                                商品
                            </button>
                        </h2>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                        <div class="card-body">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link active" href="#">
                                        <svg class="bi" fill="currentColor">
                                            <use xlink:href="bootstrap-icons.svg#list" />
                                        </svg>
                                        商品列表
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">
                                        <svg class="bi" fill="currentColor">
                                            <use xlink:href="bootstrap-icons.svg#plus-square" />
                                        </svg>
                                        添加商品
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">
                                        <svg class="bi" fill="currentColor">
                                            <use xlink:href="bootstrap-icons.svg#tag" />
                                        </svg>
                                        商品分类
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">
                                        <svg class="bi" fill="currentColor">
                                            <use xlink:href="bootstrap-icons.svg#images" />
                                        </svg>
                                        商品类型
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">
                                        <svg class="bi" fill="currentColor">
                                            <use xlink:href="bootstrap-icons.svg#gift" />
                                        </svg>
                                        品牌管理
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card bg-dark">
                    <div class="card-header" id="headingThree">
                        <h2 class="mb-0">
                            <button class="btn btn-link btn-block text-left collapsed" type="button"
                                data-toggle="collapse" data-target="#collapseThree" aria-expanded="false"
                                aria-controls="collapseThree">
                                <svg class="bi" fill="currentColor">
                                    <use xlink:href="bootstrap-icons.svg#card-list" />
                                </svg>
                                订单
                            </button>
                        </h2>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                        data-parent="#accordionExample">
                        <div class="card-body">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link active" href="#">
                                        <svg class="bi" fill="currentColor">
                                            <use xlink:href="bootstrap-icons.svg#alarm" />
                                        </svg>
                                        订单列表
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">
                                        <svg class="bi" fill="currentColor">
                                            <use xlink:href="bootstrap-icons.svg#bell" />
                                        </svg>
                                        订单设置
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">
                                        <svg class="bi" fill="currentColor">
                                            <use xlink:href="bootstrap-icons.svg#star" />
                                        </svg>
                                        退货申请处理
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="main col-md-9 col-lg-10 ml-sm-auto">
                <nav aria-label="breadcrumb" class="col-lg-12 col-md-12 pl-0 pr-0">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">商品</a></li>
                        <li class="breadcrumb-item active" aria-current="page">商品列表</li>
                    </ol>
                </nav>
                <form class="border rounded p-2">
                    <div class="form-group row">
                        <label for="productName" class="col-lg-2 col-form-label">输入搜索：</label>
                        <div class="col-lg-3">
                            <input type="text" class="form-control" id="productName" placeholder="商品名称">
                        </div>
                        <label for="productNo" class="col-lg-2 col-form-label">商品货号：</label>
                        <div class="col-lg-3">
                            <input type="text" class="form-control" id="productNo" placeholder="商品货号">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="productCategory" class="col-lg-2 col-form-label">商品分类：</label>
                        <div class="col-lg-3">
                            <select id="productCategory" class="form-control">
                                <option selected>请选择...</option>
                                <option>手机</option>
                                <option>手机壳</option>
                                <option>手机线</option>
                            </select>
                        </div>
                        <label for="productBrand" class="col-lg-2 col-form-label">商品品牌：</label>
                        <div class="col-lg-3">
                            <select id="productBrand" class="form-control">
                                <option selected>请选择...</option>
                                <option>华为</option>
                                <option>苹果</option>
                                <option>小米</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="status" class="col-lg-2 col-form-label">上架状态：</label>
                        <div class="col-lg-3">
                            <select id="status" class="form-control">
                                <option selected>全部</option>
                                <option>上架</option>
                                <option>下架</option>
                            </select>
                        </div>
                        <label for="audit" class="col-lg-2 col-form-label">审核状态：</label>
                        <div class="col-lg-3">
                            <select id="audit" class="form-control">
                                <option selected>全部</option>
                                <option>审核通过</option>
                                <option>未审核</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-10">
                            <button type="button" class="btn btn-outline-dark">
                                <svg class="bi" fill="currentColor">
                                    <use xlink:href="bootstrap-icons.svg#reply" />
                                </svg>
                                重置
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <svg class="bi" fill="currentColor">
                                    <use xlink:href="bootstrap-icons.svg#search" />
                                </svg>
                                查询结果
                            </button>
                        </div>
                    </div>
                </form>
                <div class="border rounded p-2 mt-3 mb-3">
                    <div class="row">
                        <div class="col-md-6 col-lg-6 add">
                            <svg class="bi" fill="currentColor">
                                <use xlink:href="bootstrap-icons.svg#table" />
                            </svg>
                            数据列表
                        </div>
                        <div class="col-md-6 col-lg-6 text-right add">
                            <button type="submit" class="btn btn-outline-primary btn-sm">添加</button>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>
                                    <input type="checkbox">
                                </th>
                                <th>编号</th>
                                <th>商品图片</th>
                                <th>商品名称</th>
                                <th>货号/价格</th>
                                <th>货号/价格</th>
                                <th>标签</th>
                                <th>排序</th>
                                <th>SKU库存</th>
                                <th>销量</th>
                                <th>审核状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>1</td>
                                <td>
                                    <img src="test.jpg" alt="测试图" style="width:64px;">
                                </td>
                                <td>@mdo</td>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>
                                    <button type="button" class="btn btn-danger">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>1</td>
                                <td>
                                    <img src="test.jpg" alt="测试图" style="width:64px;">
                                </td>
                                <td>@mdo</td>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>
                                    <button type="button" class="btn btn-danger">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>1</td>
                                <td>
                                    <img src="test.jpg" alt="测试图" style="width:64px;">
                                </td>
                                <td>@mdo</td>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>
                                    <button type="button" class="btn btn-danger">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>1</td>
                                <td>
                                    <img src="test.jpg" alt="测试图" style="width:64px;">
                                </td>
                                <td>@mdo</td>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>
                                    <button type="button" class="btn btn-danger">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>1</td>
                                <td>
                                    <img src="test.jpg" alt="测试图" style="width:64px;">
                                </td>
                                <td>@mdo</td>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>
                                    <button type="button" class="btn btn-danger">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <nav aria-label="Page navigation example">
                    <ul class="pagination float-right">
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <script src="bootstrap-4.5.0-dist/js/jquery.js"></script>
    <script src="bootstrap-4.5.0-dist/js/bootstrap.bundle.js"></script>
</body>

</html>